<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="images/favicon.png">
    <title></title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="css/materialize.css">
    <link rel="stylesheet" href="css/loaders.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/layer.css">
    <link rel="stylesheet" href="css/bs.css">
</head>
<style>
	.segments-page {
	       padding: 0px 0px 0px;
	}
	.hotBank-list-ico  img{
		    width: 150px;
	}
	.jt_xz{
		width: 20px;
	}
</style>
<body>

<!-- navbar -->
<div class="navbar">
    <div class="container">
        <div class="row">
            <div class="col s9">
                <div class="content-left" onclick="javascript:history.back(-1);">
                    <i class="fa fa-chevron-left center"></i>
                </div>
            </div>

        </div>
    </div>

</div>
<!-- end navbar -->

<!-- sidebar -->

<!-- end sidebar -->

<!-- list -->
<div class="contact segments-page">
    <div class="container">
        <div class="contact-contents">
            <div class="pages-title">
                <h3>绑定银行信息</h3>
                <div class="line"></div>
            </div>
            <form  id="form" onsubmit="return false" action="##" method="post">
                <div class="container-fluid " >
                        <table class="table ">
                            <tr>
                            <td class="form_td border-none td_bot">开户名</td>
                                <td class="border-none td_bot">
									<input type="text" class="form-control" name="account_name" id="account_name" placeholder="请输入姓名"/></td>
                            </tr>
                            <tr>
                          <td class="form_td border-none td_bot">银行卡号</td>
                                <td class="border-none td_bot">
									<input type="number" class="form-control" name="Card" id="Card" placeholder="请输入银行卡号"/></td>
                            </tr>
                            <tr>
                                <td class="form_td border-none td_bot">开户行</td>
                                <td class="border-none td_bot">
                                    <div class="position-rel">
                                        <div class="position-rel">
                                  <input type="text" id="chose_input"name="Bank_deposit" class="form-control" placeholder="--储蓄卡--"/>
               <div class="bank_xljt"><img class="jt_xz" width="20" src="images/jtx.png" alt="" style="width: 20px;"/>
                                            </div>
                                            <div id="chose_bank" class="bank_xljt1"></div>
                                        </div>
                                        <div class="bank_xl" style="display: none">
                                            <ul>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国农业银行">
                                                        <img src="images/zs1.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国建设银行">
                                                        <img src="images/zs2.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国工商银行">
                                                        <img src="images/zs3.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国银行">
                                                        <img src="images/zs4.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国光大银行">
                                                        <img src="images/zs5.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="华夏银行">
                                                        <img src="images/zs6.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="中国民生银行">
                                                        <img src="images/zs7.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="平安银行">
                                                        <img src="images/zs8.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                                <li class="hotBank-list">
                                                    <a href="javascript:" class="hotBank-list-ico " title="兴业银行">
                                                        <img src="images/zs9.png" width="150" alt=""/>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                 <tr><td class="form_td border-none td_bot"></td>
                                <td class="border-none td_bot">
									<button class="button" onclick="addbank();"><i class="fa fa-send"></i>提交</button>
									</td>
                            </tr>
                        </table>

                 
                </div>


            </form>
        </div>
    </div>
</div>

<!-- end list -->
		<div class="pages-title">
			<h3>银行卡</h3>
			<div class="line"></div>
			<div class="list_box table-contents z-depth-1">
					<table>
						<thead>
							<tr>
									<th>开户名</th>
									<th>开户卡号</th>
									<th>开户行</th>
									<th>操作</th>
							</tr>
						</thead>
						<tbody id="container">
					
						
						</tbody>
					</table>
		</div>
	</div>
<script src="js/jquery.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/numscroller.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
<script src="js/layer.js"></script>
<script src="js/jquerysession.js"></script>
<script src="http://www.gongjuji.net/Content/files/jquery.md5.js"></script>
<script src="js/index.js"></script>

<script>
jQuery(function ($) {
	  var UserbankList='Member/UserbankList?list=1';
	 var UserbankList =api_request(UserbankList,'GET');

	if(UserbankList.code==1){
		var html = "";
		var data=UserbankList.data.data;
			
		if(data.length !=0){
			for(var i=0;i<data.length;i++){
				 var ls=data[i];
				html="<tr><td>"+ls.account_name+"</td><td>"+ls.Card+"</td><td>"+ls.Bank_deposit+"</td><td><button class='button button-white z-depth-1' onclick='delbank("+ls.id+");'><i class='fa fa-trash-o'></i></button></td></tr>"
				   $('#container').append(html);
			}
		}else{
			html="暂未绑定银行卡"
			var container = document.getElementById("container");
			container.innerHTML += html;
		}
	}
		});
    $(function () {
        //下拉银行卡
        $(".hotBank-list-ico").bind('click', function () {
            $('#chose_input').val($(this).attr('title'));
            $('.bank_xl').hide();
            $("#chose_bank").parent('div').find('img').addClass('jt_xz');
        });
        $("#chose_bank").click(function () {
            var display = $('.bank_xl').css('display');
            if (display === 'none') {
                $('.bank_xl').show();
                $("#chose_bank").parent('div').find('img').removeClass('jt_xz');
            } else {
                $('.bank_xl').hide()
                $("#chose_bank").parent('div').find('img').addClass('jt_xz');
            }
        });
    })
	function addbank(){
		if ($("#account_name").val() == "") {
		    layer.open({
		        content: '请输入开户名'
		        , skin: 'msg'
		        , time: 2 //2秒后自动关闭
		    });
		    return false;
		}
		if ($("#Card").val() == "") {
		    layer.open({
		        content: '请输入开户卡号'
		        , skin: 'msg'
		        , time: 2 //2秒后自动关闭
		    });
		    return false;
		}
		if ($("#chose_input").val() == "") {
		    layer.open({
		        content: '请选择开户行'
		        , skin: 'msg'
		        , time: 2 //2秒后自动关闭
		    });
		    return false;
		}else{
			if(!luhmCheck($("#Card").val())){
				layer.open({
				    content: '银行卡不正确！'
				    , skin: 'msg'
				    , time: 2 //2秒后自动关闭
				});
			}
		}
         var url='Member/Userbank';
		var parm={
			
			account_name:$("#account_name").val(),
			Card:$("#Card").val(),
			Bank_deposit:$("#chose_input").val(),
			
		};
	    var result =api_request(url,'POST',parm);
		 if(result.code==1){
			 layer.open({
			     content: result.data
			     , skin: 'msg'
			     , time: 2//2秒后自动关闭
			     , end: function () {
			 		   location.reload();
			     }
			 });
		 }
		
	}
	
	function delbank(id){
		 var Delurl='Member/DelUserbank?bid='+id;
		  var Delresult =api_request(Delurl,'GET');
		  if(Delresult.code==1){
		  			 layer.open({
		  			     content: Delresult.data
		  			     , skin: 'msg'
		  			     , time: 2//2秒后自动关闭
		  			     , end: function () {
		  			 		   location.reload();
		  			     }
		  			 });
		  }
	}
</script>
</body>
</html>